<template>
<div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="开始时间" prop="startDate">
        <el-date-picker clearable size="small"
          v-model="queryParams.startDate"
          type="date"
          value-format="yyyyMMdd"
          placeholder="选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate">
        <el-date-picker clearable size="small"
          v-model="queryParams.endDate"
          type="date"
          value-format="yyyyMMdd"
          placeholder="选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="dayQuery">按天搜索</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="monthQuery">按月搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="dashboard-editor-container">

      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <bar-chart v-if ="bar" :monthData="monthData" :monthTypeData="monthTypeData" :monthPayData="monthPayData" style="height:400px"/>
        <line-chart v-if ="line" :dayData="dayData" :dayTypeData="dayTypeData" :dayPayData="dayPayData" style="height:400px"/>
      </el-row>
    </div>
</div>
</template>

<script>
import { getDayChart,getMonthChart } from "@/api/report/fundGraph";
import LineChart from '../../dashboard/LineChart'
import BarChart from '../../dashboard/BarChart'

export default {
  name: 'Index',
  components: {
    LineChart,
    BarChart
  },
  data() {
    return {
      bar:false,
      line:false,
      dayData:[],
      dayTypeData:[],
      dayPayData:[],
      monthData:[],
      monthTypeData:[],
      monthPayData:[],
      queryParams: {},
      showSearch: true
    }
  },
  created() {
    this.monthQuery();
  },
  methods: {
    resetQuery() {
      this.resetForm("queryForm");
      this.monthQuery();
    },
    dayQuery(){
      this.bar = false
      this.line = false
      this.dayData = []
      this.dayTypeData = []
      this.dayPayData = []
      getDayChart(this.queryParams).then(response => {
        response.rows.forEach(e => {
          this.dayData.push(e.costMoney)
          this.dayTypeData.push(e.abscissa)
          this.dayPayData.push(e.payMoney)
        })
        this.bar = false
        this.line = true
      })
    },
    monthQuery(){
      this.bar = false
      this.line = false
      this.monthData = []
      this.monthTypeData = []
      this.monthPayData = []
      debugger
      getMonthChart(this.queryParams).then(response => {
        response.rows.forEach(e => {
          this.monthData.push(e.costMoney)
          this.monthTypeData.push(e.abscissa)
          this.monthPayData.push(e.payMoney)
        })
        this.bar = true
        this.line = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
